<template>
  <div class="layout">
    <van-nav-bar left-arrow>
      <template #title>
        <div class="header-tab">
          <div
            class="header-tab__item"
            :class="currentTab === 1 ? 'active' : ''"
            @click="tabChange(1)"
          >
            我的商机
          </div>
          <div
            class="header-tab__item"
            :class="currentTab === 2 ? 'active' : ''"
            @click="tabChange(2)"
          >
            我的撮合
          </div>
        </div>
      </template>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="layout-content">
      <bob-tab :tabs="tabs" @getActiveButton = 'getActiveButton' @getActionTab="getActionTab"></bob-tab>
      <business-list v-if="currentTab === 1" :currentCode="currentCode" :currentTab="currentTab"></business-list>
      <match-list v-else></match-list>
    </div>
    <img v-if="currentTab === 1" src="@/assets/images/Subtract@2x.png" alt="" @click="toAddBusi">
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import BusinessList from "./components/BusinessList.vue";
import MatchList from "./components/MatchList.vue";
import { TAB_LIST_MAP } from "./index";

const router = useRouter()
const currentTab = ref<number>(1);
const tabs = ref<any[]>(TAB_LIST_MAP[1]);
const onClickLeft = () => { };

const currentCode = ref<number>(11)

const tabChange = (tab: number) => {  
  currentTab.value = tab;
  tabs.value = TAB_LIST_MAP[tab];
};

// 获取一级button code
const getActionTab = (code:number) => { 
  currentTab.value = code;
  
}

// 获取 二级button code
const getActiveButton = (tabCode:number) => { 
  console.log(tabCode, 'my-btn');
   currentTab.value = tabCode;
}
// 跳转添加商机页面
const toAddBusi = ()=>{ 
  router.push('')
}
</script>

<style lang="scss" scoped>
.layout{
  img{
    width: 47.46px;
    height: 47.46px;
    // background: linear-gradient(0deg,var(--van-primary-color) 0.21%,var(--van-primary-color)98.4%);
    position: fixed;
    right:21.27px;
    bottom:72px;
    z-index:1;
  }
}
.header-tab {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 168px;
  height: 34px;
  background-color: #f2f3f5;
  border-radius: 17px;

  &__item {
    width: 80px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: var(--bob-tab-color-default);
    font-weight: normal;
    border-radius: 15px;
    transition: all 0.3s linear;

    &.active {
      color: var(--bob-tab-color-active);
      font-weight: bold;
      background: #ffffff;
    }
  }
}
</style>

